<template>
  <view class="pay-success-page">
    <!-- 头部：支付成功图标和标题 -->
    <view class="success-header">
      <image class="success-icon" src="/static/order-pay.png"></image>
      <text class="success-title">支付成功</text>
    </view>

    <!-- 金额和预约编号 -->
    <view class="info-section">
      <view class="amount">¥ {{ amount }}</view>
      <text class="order-number">预约编号：{{ orderNumber }}</text>
    </view>

    <!-- 操作按钮 -->
    <view class="button-group">
      <button class="btn home-btn" @click="goHome">返回首页</button>
      <button class="btn detail-btn" @click="goOrderDetail">订单详情</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      amount: "998.00", // 支付金额
      orderNumber: "324252536363634", // 预约编号
    };
  },
  methods: {
    // 返回首页
    goHome() {
      uni.navigateTo({
        url: "/pages/index/index", // 替换为你的首页路径
      });
    },
    // 前往订单详情页
    goOrderDetail() {
      uni.navigateTo({
        url: "/pages/order-detail/order-detail", // 替换为你的订单详情页路径
      });
    },
  },
};
</script>

<style scoped>
/* 页面容器 */
.pay-success-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  background-color: #fff;
  padding: 0 20rpx;
}

/* 头部样式 */
.success-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 20rpx;
}

.success-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

/* 信息区域样式 */
.info-section {
  text-align: center;
  margin-bottom: 60rpx;
}

.amount {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.order-number {
  font-size: 28rpx;
  color: #666;
}

/* 按钮组样式 */
.button-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500rpx;
}

.btn {
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 10rpx;
  font-size: 32rpx;
  margin-bottom: 20rpx;
}

.home-btn {
	width: 400rpx;
  background-color: #1D6FFF;
  color: #fff;
}

.detail-btn {
	width: 400rpx;
  background-color: #f5f5f5;
  color: #999;
}
</style>